/**
 * Created by DuHuiling on 2017/4/20.
 */
var RingProgress = require('../../../../src/libs/ring-progress');
var Countdown = require('../../../../src/libs/countdown');
var Tooltip = require('../../../../src/libs/tooltip');

var HotItem = React.createClass({
    getDefaultProps:function(){
        return {
            data:{
                moreUrl:"",
                list:[]
            }
        }
    },
    render:function(){
        var list = this.props.data.list;
        return(
            <div className="index-project wrap">
                <h3 className="fz-20">投资推荐<a href={this.props.data.moreUrl}>查看更多项目 &gt;</a></h3>
                <div className="clear">
                    {list.length > 0 ?
                        list.map(function(item,index){
                            var status = item.VFinancingStatus;  //项目状态

                            //活动标志
                            var aflag = (item.Aflag ? item.Aflag.value : "");
                            var arr_aflag, resetAflag = [];
                            if(aflag){
                                arr_aflag = aflag.split(',');
                                for(var i = 0;i < arr_aflag.length;i++){
                                    resetAflag.push(arr_aflag[i].split('|'));
                                }
                            }

                            return(
                                <div className="project-list status-yr">{/*预热*/}
                                    <div className="tag">
                                        {resetAflag ?
                                            resetAflag.map(function(v,j){
                                                var _class = "color"+(j+1);
                                                if(v[1]){
                                                    return <Tooltip title={v[1]} className={_class}>{v[0]}</Tooltip>
                                                }else{
                                                    return <a href="javascript:void(0)" className={_class} alt={v[1]?v[1]:""}>{v[0]}</a>
                                                }
                                            }) : ""
                                        }
                                    </div>
                                    <span className="line"></span>
                                    <div className="pro-intro">
                                        <h4>{item.ProjectName?item.ProjectName.value:""}</h4>
                                        <p>发行规模：￥{item.TotalAmount?item.TotalAmount.value:""}元</p>
                                        <p>起投金额：￥{item.MinAmount?item.MinAmount.value:""}元</p>
                                            <span className={"status " +
                                                (status == 2 ? "status-yr" :
                                                (status == 1 ? "status-rg" :
                                                (status == 3 ? "status-mb" :
                                                "status-wc"))) }
                                            ></span>
                                    </div>
                                    <div className="pro-main">
                                        <a href={item.LinkUrl}>
                                            {item.Progress && item.Progress.value<100 ?
                                                <RingProgress border="25" radius={125} value={item.Progress.value} color={["#f1c11d","#c11921","#c11921"]}/> :
                                                <RingProgress border="25" radius={125} value={item.Progress.value} color={["#c9caca","#c9caca","#c9caca"]}/>
                                            }
                                            <div className="bg">
                                                <div className="show">
                                                    <p>预期年化收益</p>
                                                    <p className="pro-money"><b>{item.Interest?item.Interest.value:"--"}</b>%</p>
                                                    <p className="pro-data"><b>{item.Duration?item.Duration.value:"--"}</b>天</p>
                                                    <p className="pro-time">投资期限</p>
                                                </div>
                                                <div className="hovershow">
                                                    <b className="bg-hover"></b>
                                                    <p className="yellow txt-tips">预热中~敬请期待！</p>
                                                </div>
                                            </div>
                                            {status == 2 ?
                                                <p className="pro-countdown">
                                                    <Countdown ref={"clock"+index} timeRemaining={item.ProjectBeginTime.value} tpl="{h}:{m}:{s}"/>秒后开始
                                                </p> :
                                                status == 1 || status == 3 ?
                                                    <p className="progress"><span>{item.Progress.value + "%"}</span></p> :
                                                    <p className="progress"><span>完成</span></p>
                                            }
                                        </a>
                                    </div>
                                </div>
                            )
                        }) :
                        <div className="notdata"><img src="../images/1/img8.jpg"/></div>
                    }
                </div>
            </div>
        )
    }
});
module.exports = HotItem;